.cpgun {
   height:auto; overflow:hidden;
   }

.cpgun ul{
	margin:0;
	padding:0;
    list-style:none;
}
.cpgun li{
    float: left;
    width: 16%;
    height: 460px;
	padding-top:30px;
	padding-left:50px;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    transition:width .3s ease-out;
}
.cpgun li.on{
    width: 52%;
	opacity: 1;
}
.cpgun li.on i{
    opacity:0;
    transform: translate3d(-100%,0,0);
}
.cpgun li:nth-child(1){
    background: url("../images/ww1.jpg") no-repeat;
}
.cpgun li:nth-child(2){
    background: url("../images/ww2.jpg") no-repeat;
}
.cpgun li:nth-child(3){
    background: url("../images/ww3.jpg") no-repeat;
}
.cpgun li:nth-child(4){
    background: url("../images/ww4.jpg") no-repeat;
}


.cpgun li i{
    display: block;
    width: 25%;
	height: 460px;
    transition: all .3s
}
.cpgun li:nth-child(1) i{
    background: red;
}
.cpgun li:nth-child(2) i{
    background:greenyellow;
}
.cpgun li:nth-child(3) i{
    background:blue;
}
.cpgun li:nth-child(4) i{
    background:aqua;
}



@media (min-width: 1400px) and (max-width: 1600px) {

.cpgun li{

    height: 450px;

}

}

@media (min-width: 1200px) and (max-width: 1400px) {

.cpgun li{

    height: 400px;

}

}